<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全民出游案例</title>
    <style>
        html {
            height: 100%;
        }

        /*  背景图片没有铺满的解决办法*/
        /* 
            1.background属性要加cover属性(注意写法)
            2.body没有高,需要加高
            3.加了高之后还是没有铺满是因为body的父元素没有高,要找html加个高
        */
        body {
            width: 100%;
            height: 100%;
            background: url(./img/f1_1.jpg) no-repeat center 0 / cover;
        }

        .cloud img {
            position: absolute;
            left: 50%;
        }

        .cloud img:nth-child(1) {
            margin-left: -150px;
            margin-top: 20px;

            animation: yun1 2s infinite linear alternate;
        }

        .cloud img:nth-child(2) {
            margin-left: 400px;
            margin-top: 100px;
            animation: yun2 3s infinite linear alternate;
        }

        .cloud img:nth-child(3) {
            animation: yun3 4s infinite linear alternate;
            margin-left: -750px;
            margin-top: 200px;
        }

        @keyframes yun1 {
            from {
                transform: translate(0);
            }

            to {
                transform: translate(50px);
            }
        }

        @keyframes yun2 {
            from {
                transform: translate(0);
            }

            to {
                transform: translate(100px);
            }
        }

        @keyframes yun3 {
            from {
                transform: translate(0);
            }

            to {
                transform: translate(150px);
            }
        }

        .qiu img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-320%, -160%);
            animation: qiu 3s infinite linear alternate;
        }

        @keyframes qiu {
            from {
                transform: translate(-320%, -160%);
            }

            to {
                transform: translate(-320%, -180%);
            }
        }

        .font img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            animation: font .3s 1 linear;
        }

        @keyframes font {
            0% {
                transform: translate(-50%, -50%) scale(1);
            }

            20% {
                transform: translate(-50%, -50%) scale(0.1);
            }

            40% {
                transform: translate(-50%, -50%) scale(1.4);
            }

            70% {
                transform: translate(-50%, -50%) scale(0.8);
            }

            100% {
                transform: translate(-50%, -50%) scale(1);
            }
        }

        .reqiqiu img {
            position: absolute;
            bottom: 30px;
        }

        .reqiqiu img:nth-child(1) {
            margin-left: 30%;
            animation: reqiqiu 2s infinite linear alternate;
        }

        .reqiqiu img:nth-child(2) {
            margin-left: 45%;
            animation: reqiqiu 2.5s infinite linear alternate;
        }

        .reqiqiu img:nth-child(3) {
            margin-left: 60%;
            animation: reqiqiu 3s infinite linear alternate;

        }

        .reqiqiu img:nth-child(4) {
            margin-left: 75%;
            animation: reqiqiu 3.5s infinite linear alternate;
        }

        @keyframes reqiqiu {
            from {
                transform: translate(0, 0);
            }

            to {
                transform: translate(0, 20px);
            }
        }
    </style>
</head>

<body>
    <!-- 云 -->
    <div class="cloud">
        <img src="./img/yun1.png" alt="">
        <img src="./img/yun2.png" alt="">
        <img src="./img/yun3.png" alt="">
    </div>

    <div class="qiu">
        <img src="./img/san.png" alt="">
    </div>

    <div class="font">
        <img src="./img/font1.png" alt="">
    </div>

    <div class="reqiqiu">
        <img src="./img/1.png" alt="">
        <img src="./img/2.png" alt="">
        <img src="./img/3.png" alt="">
        <img src="./img/4.png" alt="">
    </div>
</body>

</html>